<template>
    <div class="login">
      <div class="input_container">
        <div class="login_panel">
          <h2>LOGIN</h2>
          <p :class="{'wrong':!status}">{{ message }}</p>
          <p class="user">
            <span></span><input v-model="userName" placeholder="User" id='username' />
          </p>
          <p class="password">
            <span></span><input v-model="pass" placeholder="Password" id='password' type="password" />
          </p>
          <button  id='login' @click="loginFn()" >Login</button>
        </div>
      </div>
      <div class="img_container">
        <p>Power by Accenture Insight Platform</p>
        <div></div>
      </div>
    </div>
</template>
<script>
import AjaxService from '@/Common/service/ajax/ajaxservice.js';
 // import './loginStyle.css';
 require('./loginStyle.css');
export default {
  name: 'Login',
  data () {
    return {
      message: 'Enter your username & password',
      status: true,
      userName:'',
      pass:'',
      service:'',
    }
  },
  methods:{
        loginFn:function(){
          this.message = 'Trying to log in ...';
          this.service.login({'EnterpriseId':this.userName,'Password':this.pass.toLocaleLowerCase()})
          .then((data) => {
            console.log(data);
              localStorage.setItem("VUELogin","true");
              sessionStorage.setItem("ResuouceId",data.PeopleKey);
              this.$router.push({name: 'home'});
          },
          err => {
              this.message = 'Account or Password is not correct.';
              this.status = false;
          });
        },
        
  },
  created: function() {
    this.service = AjaxService([
        {
            name:"login",
            url:"api/Home/LoginNonProduction",
            methed:"post",
        }
     ]);
    
  },
  destroyed: function() {},
  
}
// <style scoped >
//   @import './loginStyle.css';
// </style>
</script>

